<template>
  <el-row class="container">
    <h2>修改密码</h2>
    <el-col :span="8" :offset="6">
      <el-form :model="form" ref="form">
        <el-form-item label="原密码" :label-width="formLabelWidth" prop="password" :rules="rules1">
          <el-input v-model="form.password" auto-complete="off" placeholder="请输入" size="mini" clearable type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword" :rules="rules">
          <el-input v-model="form.newPassword" auto-complete="off" placeholder="请输入六位及以上字母和数字的组合" size="mini" clearable type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="newPassword1" :rules="checkPass">
          <el-input v-model="form.newPassword1" auto-complete="off" placeholder="请再次输入" size="mini" clearable></el-input>
        </el-form-item>
        <el-form-item class="asd">
          <el-button type="primary" @click="onSubmit('form')" size="mini">确定</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  export default {
    components:{
    },
    data(){
      var validatePass=(rule,value,callback)=> {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.form.newPassword) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
      }
      return {
        form:{
          password:'',
          newPassword:'',
          newPassword1:'',
        },
        rules:[
          {required:true,message:'不能为空',trigger:'blur'},
          {pattern:/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/,min:6, trigger: 'blur',message: '请输入六位及以上数字和字母的组合'}
        ],
        rules1:[
          {required:true,message:'不能为空',trigger:'blur'},
        ],
        checkPass: [
          { validator: validatePass, trigger: 'blur' },
        ],
        formLabelWidth:'100px'
      }
    },
    methods:{
      onSubmit(form){
        this.$refs[form].validate((valid)=>{
          if(valid){
            delete this.form.newPassword1
            ApiClient.put('/backend/common/changePassword.do',this.form).then()
          }
        })
      }
    },
    mounted(){}
  }
</script>
<style scoped lang="scss">
  .container{
    .el-form-item {
      margin-bottom: 10px;
    }
    h2{
      margin-bottom: 50px;
    }
    .asd{
      text-align: center;
      display: flex;
      justify-content: center;
      /*button.el-button{*/
        /*width:30%;*/
      /*}*/
    }
  }

</style>
